<template>
	<view>
		<view class="head" :style="{ height: height, background:background}">
			<view class="back" @click="backClick" v-if="back" :style="{ 
				top: top + 'px',
				color:color
			}"> <image src="@/static/icons/back2.png" mode="widthFix" style="width:40rpx"></image> </view>
			<view class="title" v-if="titleShow" :style="{
				top: top + 'px',
				color:color,
				'font-size': size + 'rpx'
			}">{{title}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: '自定义标题'
			},
			size: {
				type: Number,
				default: 32
			},
			color: {
				type: String,
				default: '#000'
			},
			titleShow: {
				type: Boolean,
				default: true
			},
			back: {
				type: Boolean,
				default: false
			},
			background: {
				type: String,
				default: "linear-gradient(to top, #58AC33 0%, #018348  100%)"
			}
		},
		data() {
			return {
				height: 0,
				top: 0,
			}
		},
		created() {
			//设备信息
			let app = uni.getSystemInfoSync();
			this.top = app.safeArea.top + 'rpx'
			this.height = 350 + app.safeAreaInsets.bottom + 'rpx'


		},
		methods: {
			backClick() {
				this.$router.go(-1)
			}
		}
	}
</script>

<style>
	.head {
		width: 100%;
		position: relative;
	}

	.title {
		position: absolute;
		width: 100%;
		text-align: center;
		line-height: 32px;
		height: 32px;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		letter-spacing: 4rpx;
	}

	.back {
		position: absolute;
		width: 81rpx;
		text-align: center;
		line-height: 32px;
		height: 32px;
		top: 10rpx;
		font-size: 32rpx;
		font-weight: 900;
		z-index: 9;
	}
</style>